<template>
  <div class="tree-wrapper">
    <Tree :data="treeData" :render="renderContent"></Tree>
    <Spin fix v-if="treeLoading"></Spin>
  </div>
</template>

<script>
import { getViewTree } from '@/api/approval';

export default {
  data () {
    return {
      treeData: [],
      treeLoading: true
    };
  },
  mounted () {
    this.getViewTree();
  },
  methods: {
    async getViewTree () {
      const dataid = this.$route.query.dataid;
      // const type = this.$route.query.type;
      const data = {
        nodeId: dataid
      };
      this.treeLoading = true;
      const resp = await getViewTree(data);
      this.treeLoading = false;

      const treeData = resp.data.data.nodes || [];
      // 处理数据
      const handleTerrData = treeDate => {
        treeDate.forEach(node => {
          //   this.$set(node, 'nodeClick', false);
          node.expand = true;
          if (node.children) {
            handleTerrData(node.children);
          }
        });
      };

      handleTerrData(treeData);
      this.treeData = treeData;
    },
    renderContent (h, { root, node, data }) {
      return h(
        'span',
        {
          style: {
            display: 'inline-block'
          },
          class:
            data.nodeClick === true ? 'tree-item  level-click' : 'tree-item '
        },
        [
          h(
            'span',
            {
              style: {
                display: 'inline-block',
                lineHeight: '23px',
                width: '130px',
                cursor: 'pointer'
              },
              class: 'tree-text',
              on: {
                click: () => {
                  //   this.selectTreeNode = node.node;
                  //   for (let i = 0; i < root.length; i++) {
                  //     root[i].node.nodeClick = false;
                  //   }
                  //   data.nodeClick = true;
                }
              }
            },

            [
              h('Icon', {
                props: {
                  type: 'ios-paper-outline'
                },
                style: {
                  margin: '0 5px',
                  fontSize: '16px',
                  verticalAlign: 'middle'
                }
              }),
              h('span', {}, data.nodeName)
            ]
          )
        ]
      );
    }
  }
};
</script>
<style lang="less" scoped>
.tree-wrapper {
  margin-left: 50px;
}
</style>
